<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			table{
				width: 400px;
				height: 300px;
				border: 1px solid grey;
				line-height: 60px;
				border-collapse: collapse;
			}
			td{
				border: 1px solid grey;
			}
			thead{
				text-align: center;
				background-color: dodgerblue;
				color: white;
			}
			tbody{
				background-color: lightgrey;
			}
			tbody tr:hover{
				background-color: white;
			}
		</style>
	</head>
	<body>
		<table>
			<thead>
				<tr>
					<td><input type="checkbox" id="thChe"/></td>
					<td>菜名</td>
					<td>饭店</td>
				</tr>
			</thead>
			<tbody id="tbody">
				<tr>
					<td><input type="checkbox"/></td>
					<td>地三鲜</td>
					<td>田老师</td>
				</tr>
				<tr>
					<td><input type="checkbox"/></td>
					<td>西红柿炒鸡蛋</td>
					<td>田老师</td>
				</tr>
				<tr>
					<td><input type="checkbox"/></td>
					<td>酸辣土豆丝</td>
					<td>田老师</td>
				</tr>
				<tr>
					<td><input type="checkbox"/></td>
					<td>萝卜炒黄豆</td>
					<td>田老师</td>
				</tr>
			</tbody>
		</table>
		<script>
			var thChe = document.getElementById("thChe");
			var tbody = document.getElementById("tbody");
			var cheArr = tbody.getElementsByTagName("input");
			thChe.onclick = function(){
				for(var i=0;i < cheArr.length;i++)
				{
					cheArr[i].checked = this.checked;
				}
			}
			for(var i=0;i<cheArr.length;i++)
			{
				cheArr[i].onclick = function(){
					var bool =true;
					for(var j=0;j<cheArr.length;j++)
					{
						if(cheArr[j].checked == false)
						{
							bool = false;
						}
					}
					thChe.checked = bool;
				}
			}
			
		</script>
	</body>
</html>
